<template>
    <div class="items fcc" :class="{toleft: toleft}" >
        <div class="one ilbk bb" :class="inView ? 'showtxt' : 'hiddtxt'">
            <h3 class="title" v-text="title" />
            <ul>
                <li v-for="(v, index) in txt" :key="index"
                    class="txts"
                v-text="v"></li>
            </ul>
        </div>
        <div class="two ilbk" :class="aniclass">
            <img :src="img" class="img">
        </div>
    </div>
</template>

<script>
export default {
    props: [
        'title',
        'txt',
        'img',
        'toleft',
        'aniclass',
    ],
    data() {
        return {
            inView: false,
        }
    },
    created() {

    },
    mounted() {
        this.controlShowMenu()
	},
    methods: {
        controlShowMenu() {
            let se = " .Info ." + this.aniclass
            let dom = document.querySelector(se)
            var io = new IntersectionObserver(entries => {
                let isIn = entries[0].intersectionRatio !== 0;
                if (isIn) {
                    showed();
                } else {
                    disappeared();
                }
            });
            io.observe(dom);
            let showed = () => {
                this.inView = true;
            };
            let disappeared = () => {
                // this.inView = false;
            // console.log('disappeared');
            };
        }

    }
}
</script>

<style scoped>
    .items {
        overflow: hidden;
        margin: 60px 0;
        text-align: center;
    }
    .toleft {
        direction: rtl;
    }
    .one, .two {
        vertical-align: middle;
    }
    .one {
        position: relative;
        margin: 0 40px;
        text-align: left;
    }
    .title {
	    font-size: 34px;
        color: #c7cce6;
    }
    .txts {
        margin-bottom: 10px;
        max-width: 500px;
        line-height: 32px;
        font-size: 18px;
        color: #a7b6c8;
    }
    .showtxt {
        opacity: 1;
        top: 0;
        transition: all 2s linear;
    }
    .hiddtxt {
        top: 40px;
        opacity: 0;
    }

    .two {
        width: 40%;
        text-align: center;
    }
    .img {
        width: 60%;
    }
</style>
